<template>
  <basic-container>
    <el-form
      ref="form"
      searchform
      :model="form"
      :rules="rules"
      label-width="80px"
      @submit.native.prevent
    >
      <el-row>
        <el-col :span="5" style="min-width: 150px">
          <div class="text" style="width: 30%">短id:</div>
          <el-input
            id="id-offer-cerative-input-shortid"
            placeholder="请输入短id"
            v-model="form.stringShortId"
            clearable
            style="width: 60%"
            size="mini"
            @keyup.enter.native="searchForm"
          >
          </el-input>
        </el-col>
        <el-col :span="5" style="min-width: 150px">
          <div class="text" style="width: 30%">本地文件名:</div>
          <el-input
            id="id-offer-creative-input-localfilename"
            placeholder="请输入本地文件名"
            v-model="form.localFilename"
            clearable
            style="width: 60%"
            size="mini"
          >
          </el-input>
        </el-col>
        <el-col :span="5" style="min-width: 150px">
          <div class="text" style="width: 30%">素材名称:</div>
          <el-input
            id="id-offer-creative-input-name"
            placeholder="请输入素材名称"
            v-model="form.name"
            clearable
            style="width: 60%"
            size="mini"
            @keyup.enter.native="searchForm"
          >
          </el-input>
        </el-col>
        <el-col :span="5" style="min-width: 150px">
          <div class="text" style="width: 30%">类型:</div>
          <el-select
            id="id-offer-cerative-input-isShowSelectOptions-type"
            v-model="form.type"
            clearable
            placeholder="请选择类型"
            size="mini"
            style="width: 60%"
            ref="createType"
            @visible-change="isShowSelectOptions"
            @change="searchForm"
          >
            <el-option
              v-for="item in dataType"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col
          :span="4"
          style="min-width: 160px; display: flex; justify-content: flex-end"
        >
          <el-tooltip
            class="item"
            effect="dark"
            content="展开全部"
            placement="top"
          >
            <el-button
              id="id-offer-creative-button-unfoldicon"
              :class="upIcon"
              class="search-circle"
              @click="unfoldIcon"
              style="margin-right: 10px"
            ></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="清空" placement="top">
            <el-button
              id="id-offer-creative-button-emptyForm"
              :class="emptyIcon"
              class="search-circle"
              @click="emptyForm"
            ></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="搜索" placement="top">
            <el-button
              id="id-offer-creative-button-searchForm"
              type="primary"
              icon="el-icon-search"
              size="small"
              @click="searchForm"
              style="margin-right: 0"
            >
              搜索
            </el-button>
          </el-tooltip>
        </el-col>
      </el-row>
      <el-row v-show="searchConceal">
        <el-col :span="5" style="min-width: 150px">
          <div class="text" style="width: 30%">媒体:</div>
          <el-select
            id="id-offer-creative-isShowSelectOptions-platform"
            v-model="form.platform"
            clearable
            placeholder="请选择媒体"
            size="mini"
            style="width: 60%"
            ref="createPlatform"
            @visible-change="isShowSelectOptions"
            @change="searchForm"
          >
            <el-option
              v-for="item in platformsList"
              :key="item.value"
              :label="item.dictValue"
              :value="item.dictKey"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="5" style="min-width: 150px">
          <div class="text" style="width: 30%">标签:</div>
          <el-input
            id="id-offer-creative-tags"
            placeholder="请输入标签"
            v-model="form.tags"
            clearable
            style="width: 60%"
            size="mini"
          >
          </el-input>
        </el-col>
        <el-col :span="5" style="min-width: 150px">
          <div class="text" style="width: 30%">设计者:</div>
          <el-select
            id="id-offer-creative-isShowSelectOptions-designer"
            v-model="form.designer"
            clearable
            filterable
            size="mini"
            placeholder="请选择设计者"
            style="width: 60%"
            ref="createDesigner"
            @visible-change="isShowSelectOptions"
            @change="searchForm"
          >
            <el-option
              v-for="item in designersList"
              :key="item.value"
              :label="item.realName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="5" style="min-width: 150px">
          <div class="text" style="width: 30%">原创者:</div>
          <el-select
            id="id-offer-creative-isShowSelectOptions-two"
            v-model="form.originator"
            clearable
            filterable
            size="mini"
            placeholder="请选择原创者"
            style="width: 60%"
            ref="createOriginator"
            @visible-change="isShowSelectOptions"
            @change="searchForm"
          >
            <el-option
              v-for="item in originatorList"
              :key="item.value"
              :label="item.realName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-row v-show="searchConceal">
        <el-col :span="5" style="min-width: 150px">
          <div class="text" style="width: 30%">审批状态:</div>
          <el-select
            id="id-offer-creative-status-two"
            multiple
            v-model="form.status"
            clearable
            placeholder="请选择审批状态"
            size="mini"
            style="width: 60%"
            ref="createStatus"
            @visible-change="isShowSelectOptions"
            @change="searchForm"
          >
            <el-option
              v-for="item in approvalStatusList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="5" style="min-width: 150px">
          <div class="text" style="width: 30%">需求名称:</div>
          <el-input
            id="id-offer-creative-requestName"
            placeholder="请输入需求名称"
            v-model="form.requestName"
            clearable
            style="width: 60%"
            size="mini"
            @keyup.enter.native="searchForm"
          >
          </el-input>
        </el-col>
        <el-col :span="5" style="min-width: 150px">
          <div class="text" style="width: 30%">素材尺寸:</div>
          <el-select
            id="id-offer-creative-sizeType"
            v-model="form.sizeType"
            clearable
            placeholder="请选择素材尺寸"
            size="mini"
            style="width: 60%"
            ref="sizeType"
            @visible-change="isShowSelectOptions"
            @change="searchForm"
          >
            <el-option
              v-for="item in sizeType"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="5" style="min-width: 150px">
          <div class="text" style="width: 30%">备注:</div>
          <el-input
            id="id-offer-creative-remark"
            placeholder="请输入备注"
            v-model="form.remark"
            clearable
            size="mini"
            style="width: 60%"
            @keyup.enter.native="searchForm"
          >
          </el-input>
        </el-col>
      </el-row>
      <el-row v-show="searchConceal">
        <el-col :span="6" style="min-width: 150px">
          <div class="text" style="width: 25%">上传时间:</div>
          <el-date-picker
            id="id-offer-creativer-submissionTime-pickerOptions"
            v-model="submissionTime"
            type="daterange"
            value-format="yyyy-MM-dd"
            unlink-panels
            size="mini"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            style="width: 70%"
          >
          </el-date-picker>
        </el-col>
        <el-col :span="6" style="min-width: 150px">
          <div class="text" style="width: 25%">审批通过时间:</div>
          <el-date-picker
            size="mini"
            v-model="form.beginAuditDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="包含此时间以后的记录"
          >
          </el-date-picker>
        </el-col>
        <el-col :span="5" style="min-width: 150px">
          <div class="text" style="width: 30%">是否有花费:</div>
          <el-select
            id="id-offer-creative-sizeType"
            v-model="form.used"
            clearable
            placeholder="请选择"
            size="mini"
            style="width: 60%"
            ref="sizeType"
            @visible-change="isShowSelectOptions"
            @change="searchForm"
          >
            <el-option
              v-for="item in usedList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="5" style="min-width: 150px">
          <div class="text" style="width: 30%">投放状态:</div>
          <el-select
            id="id-offer-creative-sizeType"
            v-model="adCreativeStatus"
            clearable
            placeholder="请选择"
            size="mini"
            style="width: 60%"
            multiple
            ref="sizeType"
            @visible-change="isShowSelectOptions"
            @change="searchForm"
          >
            <el-option
              v-for="item in adCreativeStatusList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-row v-show="searchConceal">
        <el-col :span="5" style="min-width: 150px">
          <div class="text" style="width: 30%">使用情况:</div>
          <el-select
            multiple
            id="id-offer-creative-isShowSelectOptions-platform"
            v-model="qUsedStatus"
            clearable
            placeholder="请选择使用情况"
            size="mini"
            style="width: 60%"
            @change="searchForm"
          >
            <el-option label="未使用" value="UNUSED"></el-option>
            <el-option label="已使用" value="USED"></el-option>
            <el-option label="7天未使用" value="DAY7UNUSED"></el-option>
          </el-select>
        </el-col>
      </el-row>
    </el-form>
    <avue-crud
      :option="option"
      :view-name="'creative'"
      :table-loading="loading"
      :data="data"
      :page.sync="page"
      :permission="permissionList"
      :before-open="beforeOpen"
      v-model="form"
      ref="crud"
      :cell-class-name="getCellClassName"
      @row-update="rowUpdate"
      @row-save="rowSave"
      @row-del="rowDel"
      @search-change="searchChange"
      @search-reset="searchReset"
      @selection-change="selectionChange"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @on-load="onLoad"
      @row-dblclick="rowDbclick"
      @row-click="rowClick"
      @sort-change="sortChange"
    >
      <template slot="adCreativeStatusHeader" slot-scope="{ column }">
        <el-popover placement="top-start" width="200" trigger="hover">
          <div class="popover_pane">
            <div>
              <i class="el-icon-info" style="color: #00a2ff"></i>
              <strong> 当前投放状态</strong>
            </div>
            <div class="dot_status ad_online_status">
              <i> </i>
              <span>在线-正常</span>
            </div>
            <div class="dot_status ad_online_limit_status">
              <i> </i>
              <span>在线-受限</span>
            </div>
            <div class="dot_status ad_illegal_status">
              <i> </i>
              <span>不在线-违规</span>
            </div>
            <div class="dot_status ad_stop_status">
              <i> </i>
              <span>不在线-停止</span>
            </div>
          </div>
          <span slot="reference" class="text-link">{{
              (column || {}).label
            }}</span>
        </el-popover>
      </template>
      <template slot="shortId" slot-scope="scope">
        <el-tag :class="stauts[scope.row.status][0]">{{
            scope.row.shortId
          }}</el-tag>
      </template>
      <template slot="status" slot-scope="scope">
        <el-tag :class="stauts[scope.row.status][0]">{{
            stauts[scope.row.status][1]
          }}</el-tag>
      </template>
      <template slot="usedStatus" slot-scope="scope">
        <el-tag v-if="scope.row.usedStatus == 'UNUSED' ">未使用</el-tag>
        <el-tag v-else-if="scope.row.usedStatus == 'USED'">已使用</el-tag>
        <el-tag v-else>7天未使用</el-tag>
      </template>
      <template slot="tags" slot-scope="scope">
        <div
          v-if="scope.row.tags !== ''"
          style="display: flex; align-items: center"
        >
          <div
            v-for="(item, index) in scope.row.tags.split(',')"
            :key="index"
            style="margin-right: 10px"
          >
            <el-tag
              :style="{ background: tagsColor(index) }"
              style="color: white"
            >{{ item }}</el-tag
            >
          </div>
        </div>
      </template>
      <!--     超出表头省略号 -->
      <template slot="firstUseTimeHeader" slot-scope="{ column }">
        <div class="hanDer">{{ (column || {}).label }}</div>
      </template>
      <template slot="used" slot-scope="scope">
        <el-tag> {{ scope.row.used ? "是" : "否" }}</el-tag>
      </template>

      <template slot="menuLeft">
        <el-button
          id="id-offer-creative-handleAdd"
          type="primary"
          size="small"
          icon="el-icon-plus"
          plain
          v-if="!isAdvSharedOffer && permission.creative_add"
          @click="handleAdd"
        >新 增
        </el-button>
        <el-button
          id="id-offer-creative-handleDelete"
          type="danger"
          size="small"
          icon="el-icon-delete"
          plain
          v-if="!isAdvSharedOffer && permission.creative_delete"
          @click="handleDelete"
        >删 除
        </el-button>

        <el-popover placement="bottom" width="200" trigger="hover" v-if="!isAdvSharedOffer">
          <template>
            <div class="download_file">
              <h4>素材下载样式</h4>
              <el-radio v-model="form.createType" :label="0">
                原素材-素材名</el-radio
              >
              <el-radio
                style="margin-top: 10px"
                v-model="form.createType"
                :label="2"
              >
                原素材-本地文件名</el-radio
              >
              <el-radio
                style="margin-top: 10px"
                v-if="waterMarkOpen"
                v-model="form.createType"
                :label="1"
              >
                水印素材-素材名
              </el-radio>
              <el-radio
                style="margin-top: 10px"
                v-if="waterMarkOpen"
                v-model="form.createType"
                :label="3"
              >
                水印素材-本地文件名
              </el-radio>
            </div>
            <div
              style="display: flex; justify-content: center; margin-top: 15px"
            >
              <el-button
                round
                type="primary"
                size="mini"
                @click="checkSelectionList"
              >开始下载
              </el-button>
            </div>
          </template>
          <el-button
            id="id-offer-creative-dow"
            slot="reference"
            type="warning"
            size="small"
            icon="el-icon-download"
            v-if="roles.admin || roles.optimizer || roles.designer"
            plain
          >下载
          </el-button>
        </el-popover>

        <el-button
          id="id-offer-creative-handleExamine"
          type="warning"
          size="small"
          icon="el-icon-s-order"
          plain
          v-if="!isAdvSharedOffer && permission.submit_audit"
          @click="handleExamine"
        >提交审核
        </el-button>

        <el-button
          id="id-offer-creative-gen-watermark"
          type="warning"
          size="small"
          icon="el-icon-s-order"
          plain
          v-if="
              permission.submit_audit ||
              permission.submit_add ||
              permission.submit_edit
            "
          :disabled="selectionList == null || selectionList.length == 0"
          @click="handleGenWaterMark"
        >重新处理素材
        </el-button>

        <!--<el-button-->
        <!--id="id-offer-creative-handleUploadToYoutubeOld"-->
        <!--type="warning"-->
        <!--size="small"-->
        <!--:icon="youtubeOldLoading ? 'el-icon-loading' : 'el-icon-upload'"-->
        <!--:disabled="youtubeOldLoading"-->
        <!--plain-->
        <!--v-if="!isAdvSharedOffer && (roles.admin || roles.optimizer)"-->
        <!--@click="handleUploadToYoutubeOld"-->
        <!--&gt;上传至油管-->
        <!--</el-button>-->
        <el-button
          id="id-offer-creative-handleUploadToYoutube"
          type="warning"
          size="small"
          :icon="youtobeLoading ? 'el-icon-loading' : 'el-icon-upload'"
          :disabled="youtobeLoading"
          plain
          v-if="!isAdvSharedOffer && (roles.admin || roles.optimizer)"
          @click="handleUploadToYoutube"
        >上传至油管
        </el-button>

        <el-button
          id="id-offer-creative-handleUploadToTT"
          type="warning"
          size="small"
          :icon="youtobeLoading ? 'el-icon-loading' : 'el-icon-upload'"
          :disabled="youtobeLoading"
          plain
          v-if="!isAdvSharedOffer && (roles.admin || roles.optimizer)"
          @click="handleUploadToTT"
        >上传至TT
        </el-button>

        <el-button
          id="id-offer-creative-handleShare"
          type="warning"
          size="small"
          icon="el-icon-top-right"
          plain
          v-if="
              !isAdvSharedOffer &&
              (roles.admin || roles.optimizer || roles.designer)
            "
          @click="handleShare"
        >共 享
        </el-button>

        <!--          v-if="!isAdvSharedOffer && (roles.admin || roles.optimizer || roles.designer)"-->
        <el-button
          id="id-offer-creative-handleDisable"
          size="small"
          v-if="btnVisible"
          icon="el-icon-remove-outline"
          type="info"
          @click="handleDisable"
        >禁 用
        </el-button>
        <el-button
          v-if="btnVisible"
          size="small"
          icon="el-icon-circle-check"
          type="success"
          @click="clearDisable"
        >解 禁
        </el-button>

        <el-button
          id="id-offer-creative-addTagsModel"
          v-if="
              !isAdvSharedOffer &&
              (roles.admin || roles.optimizer || roles.designer)
            "
          size="small"
          type="success"
          icon="el-icon-price-tag"
          @click="addTagsModel"
        >添加标签
        </el-button>
      </template>
      <template slot="menuRight">
        <el-tooltip
          effect="dark"
          content="短ID、本地文件名、素材名称、需求名称、油管链接双击可快速复制"
          placement="top-start"
        >
          <el-button size="small" circle icon="el-icon-question"></el-button>
        </el-tooltip>
        <el-tooltip effect="dark" content="导出" placement="top-start">
          <el-button
            size="small"
            circle
            @click="uploading"
            icon="el-icon-download"
          ></el-button>
        </el-tooltip>
        <!-- <el-tooltip effect="dark" content="刷新" placement="top-start">-->
        <!-- <el-button size="small" circle @click="refreshChange" icon="el-icon-refresh"></el-button>
        </el-tooltip>
        <el-tooltip effect="dark" content="显隐" placement="top-start">
          <el-button size="small" circle @click="showHide" icon="el-icon-s-operation"></el-button>
       </el-tooltip>  -->
      </template>
      <template slot-scope="{ row }" slot="name">
        <el-tooltip
          content="水印正在生成"
          placement="top"
          v-if="
              row.waterUrl === '' ||
              row.waterUrl === null ||
              row.waterUrl === '-1' ||
              row.waterUrl === '-2'
            "
        ><i class="el-icon-warning" style="color: red"></i
        ></el-tooltip>
        <tooltip-text :content="row.name"></tooltip-text>
      </template>
      <template slot-scope="{ row }" slot="designer">
        {{ designerChange(row.designer) }}
      </template>
      <template slot-scope="{ row }" slot="originator">
        <el-tooltip
          effect="dark"
          :content="originatorChange(row.originator)"
          placement="top"
        >
          <span class="over-flow">{{ originatorChange(row.originator) }}</span>
        </el-tooltip>
      </template>
      <template slot-scope="{ row }" slot="youtubeLink">
        {{ row.youtubeLink }}
      </template>
      <template slot-scope="{ row }" slot="localFilename">
        <el-tooltip
          class="item"
          effect="dark"
          :content="row.localFilename"
          placement="top-start"
        >
          <div
            v-if="
                localFilenameEdit.editEnable &&
                localFilenameEdit.editIndex === row.$index
              "
          >
            <el-input
              id="id-offer-creative-changeLocalFilename"
              size="mini"
              v-model="localFilenameEdit.newVal"
              style="width: 250px"
              @blur="changeLocalFilename(row)"
            ></el-input>
          </div>
          <div
            v-else
            style="
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
              "
          >
            <i class="el-icon-edit" @click="localFilenameEditEnable(row)"></i
            >{{ row.localFilename }}
          </div>
        </el-tooltip>
      </template>

      <template slot-scope="{ row }" slot="remark">
        <el-tooltip
          class="item"
          effect="dark"
          :content="row.remark"
          placement="top-start"
        >
          <div
            v-if="remarkEdit.editEnable && remarkEdit.editIndex === row.$index"
          >
            <el-input
              id="id-offer-creative-remark-edit"
              size="mini"
              v-model="remarkEdit.newVal"
              style="width: 250px"
              @blur="changeRemark(row)"
            ></el-input>
          </div>
          <div
            v-else
            style="
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
              "
          >
            <i class="el-icon-edit" @click="remarkEditEnable(row)"></i
            >{{ row.remark }}
          </div>
        </el-tooltip>
      </template>

      <template slot-scope="{ row }" slot="creativeUrl2">
        <div class="cell">
          <span v-if="row.thumbnailUrl === '-2'">上传失败</span>
          <span v-if="row.thumbnailUrl === '-1'">上传中</span>
          <div v-if="row.thumbnailUrl !== '-1' && row.thumbnailUrl !== '-2'">
            <el-image
              style="
                  max-width: 100%;
                  width: auto;
                  max-height: 200px;
                  height: auto;
                "
              :src="
                  row.thumbnailUrl +
                  (row.thumbnailUrl.indexOf('?') > 0 ? '&' : '?') +
                  (row.updateTime
                    ? row.updateTime.replace(/[ -/:]*/gi, '')
                    : 1234)
                "
              alt=""
              @click="handleMediaPreview(row)"
            />
          </div>
        </div>
      </template>
      <template slot-scope="{ row, column, $index }" slot="platform">
        <div v-if="!row.plfSwitch" style="display: flex; flex-wrap: wrap">
          <div
            style="width: 20px; margin-right: 4px"
            v-for="(item, index) in platformLogo(row.platform)"
            :key="index"
          >
            <img style="width: 100%" :src="item.url" :title="item.name" />
          </div>
        </div>
        <div v-else>
          <el-select
            v-model="row.platform"
            multiple
            :ref="'plfSelect' + row.id"
            @visible-change="handleBlurPlf($event, row)"
          >
            <el-option
              v-for="item in platformOption"
              :key="item.value"
              :value="item.value"
            >
              <img style="width: 20px; height: 20px" :src="item.url" />
            </el-option>
          </el-select>
        </div>
      </template>
      <template slot-scope="{ row }" slot="adCreativeStatus">
        <div style="display: flex; justify-content: center">
          <div class="dot_status">
            <i
              v-for="(item, index) in creativeStatusDotSplit(
                  row.adCreativeStatus
                )"
              :key="index"
              :style="item"
            >
            </i>
          </div>
        </div>
      </template>
      <template slot-scope="{ row }" slot="onlineAdScale">
        <div style="display: flex; justify-content: center">
          <div
            style="color: #00a2ff; cursor: pointer"
            @click="openAdCreativeDrawer(row)"
          >
            {{ row.onlineAdScale }}
          </div>
        </div>
      </template>

      <template slot-scope="{ row }" slot="menu">
        <el-button
          id="id-offer-creative-handleDup"
          v-if="
              !isAdvSharedOffer &&
              (roles.admin || roles.optimizer || roles.designer) &&
              !(
                row.waterUrl === '' ||
                row.waterUrl === null ||
                row.waterUrl === '-1' ||
                row.waterUrl === '-2'
              )
            "
          icon="el-icon-document-copy"
          size="mini"
          type="text"
          @click="handleDup(row)"
        >复 制
        </el-button>
        <el-button
          id="id-offer-creative-handleCheck"
          icon="el-icon-view"
          size="mini"
          type="text"
          @click="handleCheck(row)"
        >查 看
        </el-button>
        <el-button
          id="id-offer-creative-handleEdit"
          v-if="
              !isAdvSharedOffer &&
              row.status == 0 &&
              (roles.admin || roles.optimizer || roles.designer)
            "
          icon="el-icon-edit "
          size="mini"
          type="text"
          @click="handleEdit(row)"
        >编 辑
        </el-button>
        <div v-if="row.status === 1 ">
          <el-tooltip class="item" effect="dark" content="素材已提交审核，删除会影响素材审核" placement="top">
            <el-button
              id="id-offer-creative-rowDel"
              v-if="!isAdvSharedOffer && (roles.admin || roles.optimizer)"
              icon="el-icon-delete"
              size="mini"
              type="text"
              @click="rowDel(row)"
            >删 除
            </el-button>
          </el-tooltip>
        </div>
        <div v-else>
          <el-button
            id="id-offer-creative-rowDel"
            v-if="!isAdvSharedOffer && (roles.admin || roles.optimizer)"
            icon="el-icon-delete"
            size="mini"
            type="text"
            @click="rowDel(row)"
          >删 除
          </el-button>
        </div>
      </template>
    </avue-crud>
    <!--    <div v-if="detailDialog">-->
    <!--      <el-dialog :visible.sync="detailDialog"-->
    <!--                 :modal-append-to-body="false"-->
    <!--                 :close-on-click-modal="false" :before-close="handleUploadClose" :append-to-body="true" width="80%">-->
    <!--        <div slot="title" style="font-weight: 600;font-size: 15px">新增素材</div>-->
    <!--        <product-creative :request-detail-info="detailInfo" :offerInfo="offerInfoBak"-->
    <!--                          :close="handleUploadClose" :is-creative-still-request="0" :platform-list="platformsList"></product-creative>-->
    <!--      </el-dialog>-->
    <!--    </div>-->
    <creative-detail
      :dialogVisible="detailDialog"
      :title="dialogTitle"
      @close-dialog="closeCreativeDialog"
      :data-list="detailData"
    ></creative-detail>
    <creative-check
      :dialogVisible="checkDialog"
      @close-dialog="closeCreativeCheckDialog"
      :data-list="checkData"
      :comment="comment"
    ></creative-check>

    <el-dialog
      title="提交审核"
      :visible.sync="visible"
      odal-append-to-body="false"
      :close-on-click-modal="false"
      :before-close="handleExamineCLose"
      :append-to-body="true"
      v-if="visible"
      width="80%"
    >
      <creative-audit-detail
        :useType="useType"
        :dataList="dataList"
      ></creative-audit-detail>
    </el-dialog>

    <el-dialog
      title="请选择下载素材的类型"
      :visible.sync="dialogFormVisible"
      :append-to-body="true"
      :modal-append-to-body="false"
      width="80%"
    >
      <el-form :model="form">
        <el-form-item label="素材类型">
          <el-radio-group v-model="form.createType">
            <el-radio class="radio" :label="0">原始素材</el-radio>
            <el-radio class="radio" :label="1">水印素材</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          id="id-offer-creative-handleUploadToYoutube-dialogFormVisible-true"
          @click="dialogFormVisible = false"
        >取 消
        </el-button>
        <el-button type="primary" @click="dialogFormVisible = true"
        >确 定
        </el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="上传至油管"
      :visible.sync="youtobeLoading"
      width="50%"
      append-to-body
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      @close="handleUploadToYoutubeClose"
    >
      <youtube-dialog
        v-if="youtobeLoading"
        @validYouTubeStatus="validYouTubeStatus"
        @updateTubeUploading="updateTubeUploading"
        :creative-ids="youTubeIds"
        :re-upload-info="reUploadInfo"
        ref="youtubeDialogRef"
      />
      <span slot="footer" class="dialog-footer">
          <el-button
            id="id-offer-creative-handleUploadToYoutube-closeYouTube"
            @click="closeYouTube"
          >取 消</el-button
          >
        <!--<el-button type="primary" @click="youtobeLoading = false">确 定</el-button>-->
        </span>
    </el-dialog>
    <el-drawer
      title="上传至TT"
      :visible.sync="uploadTTDrawer"
      size="70%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :wrapperClosable="false"
      :modal-append-to-body="false"
    >
      <el-divider></el-divider>
      <el-form label-width="90px">
        <el-row>
          <el-col :span="5" style="min-width: 150px">
            <el-form-item label="订单:">
              <el-select
                size="mini"
                clearable
                filterable
                multiple
                v-model="offerIdList"
                placeholder="请选择订单"
              >
                <el-option
                  v-for="item in offerIds"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="5" style="min-width: 150px">
            <el-form-item label="账户名:">
              <el-select
                size="mini"
                clearable
                filterable
                v-model="accountform.name"
                placeholder="请选择账户名"
              >
                <el-option
                  v-for="item in searchAccountNames"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5" style="min-width: 150px">
            <el-form-item label="账户ID:">
              <el-select
                size="mini"
                clearable
                filterable
                v-model="accountform.platformId"
                placeholder="请选择账户名"
              >
                <el-option
                  v-for="item in searchAccounts"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5" style="min-width: 150px">
            <el-form-item label="账户运营人:">
              <el-select
                size="mini"
                clearable
                filterable
                v-model="accountform.operator"
                placeholder="请选择账户名"
                style="width: 100%"
              >
                <el-option
                  v-for="item in searchOperators"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item>
              <el-button
                size="mini"
                type="primary"
                @click="getTTAccountTableData"
              >查询</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
        <div style="padding: 0px 15px">
          <span>*选择其他订单时，默认将该素材复制一份到对应订单</span>
        </div>
        <el-row style="padding: 15px">
          <el-table
            :data="accountList"
            ref="uploadTTTable"
            v-loading="uploadTTLoading"
            @selection-change="handleAccountSelectionChange"
          >
            <el-table-column
              prop="id"
              width="60px"
              :fixed="true"
              type="selection"
            ></el-table-column>
            <el-table-column prop="offerName" width="200px" label="订单" />
            <el-table-column prop="name" width="400px" label="账户名" />
            <el-table-column prop="platformId" width="360px" label="账户ID" />
            <el-table-column prop="operatorName" label="账户运营人" />
          </el-table>
          <div class="bottom-page clearfix" style="margin-top: 10px">
            <el-pagination
              background
              @size-change="handleAccountSizeChange"
              @current-change="handleAccountCurrentChange"
              :current-page="uploadTTPage.currentPage"
              :page-sizes="[5, 10, 20, 30, 40, 50, 100]"
              :page-size="uploadTTPage.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="creativeTotal"
            >
            </el-pagination>
          </div>
        </el-row>
      </el-form>

      <div class="drawer__content">
        <div class="drawer__footer">
          <el-button
            type="primary"
            id="id-offer-creative-handleUploadToTT-uploadTT"
            @click="submitTTUpload"
          >开始上传
          </el-button>
          <el-button
            id="id-offer-creative-handleUploadToTT-closeTT"
            @click="TTProgressClose"
          >取消</el-button
          >
        </div>
      </div>
    </el-drawer>
    <!--预览弹窗-->
    <creative-card-preview
      v-model="mediaPreviewDialog.dialogVisible"
      :media-preview="currentCreative"
    ></creative-card-preview>
    <!--<el-dialog-->
    <!--  title="预览"-->
    <!--  :visible="mediaPreviewDialog.dialogVisible"-->
    <!--  :modal-append-to-body="false"-->
    <!--  width="80%"-->
    <!--  top="0px;"-->
    <!--  :close-on-click-modal="false"-->
    <!--  :before-close="-->
    <!--    () => {-->
    <!--      mediaPreviewDialog.dialogVisible = false;-->
    <!--      if(mediaPreviewDialog.dialogType === 'video') {-->
    <!--        this.$refs.video.pause();-->
    <!--      }-->
    <!--      mediaPreviewDialog.previewUrl = ''-->
    <!--    }-->
    <!--  "-->
    <!--  :append-to-body="true"-->
    <!--  style="text-align: center"-->
    <!--&gt;-->
    <!--  <img-->
    <!--    v-if="mediaPreviewDialog.dialogType === 'image'"-->
    <!--    :style="previewStyle()"-->
    <!--    :src="mediaPreviewDialog.previewUrl"-->
    <!--  />-->
    <!--  <video-->
    <!--    ref="video"-->
    <!--    v-if="mediaPreviewDialog.dialogType === 'video'"-->
    <!--    :src="mediaPreviewDialog.previewUrl"-->
    <!--    :style="previewStyle()"-->
    <!--    controls="controls"-->
    <!--  ></video>-->
    <!--</el-dialog>-->

    <el-dialog
      :visible="creativeTagsDialog"
      title="添加标签"
      :modal-append-to-body="false"
      width="80%"
      :close-on-click-modal="false"
      :append-to-body="true"
      :before-close="tagsGetBack"
    >
      <creative-tags
        v-if="creativeTagsDialog"
        :tags-get-back="tagsGetBack"
        :creative-tags-snapshot="creativeTagsSnapshot"
        :creative-tags-data="creativeTagsData"
      ></creative-tags>
    </el-dialog>
    <!--  设置隐藏域，用于下载素材  -->
    <div id="downloadContent" style="display: none"></div>
    <el-drawer
      style="padding-left: 20px"
      title="导出内容"
      :visible.sync="exportSwitch"
      direction="rtl"
      :modal="false"
      :append-to-body="true"
    >
      <el-divider></el-divider>
      <el-checkbox-group
        v-model="checkList"
        style="display: flex; flex-direction: column; margin-left: 20px"
      >
        <el-checkbox
          v-for="(item, index) in this.exportFieldList"
          :key="index"
          :label="item.label"
        ></el-checkbox>
      </el-checkbox-group>
      <div style="display: flex; justify-content: center; margin-top: 40px">
        <el-button
          type="primary"
          style="margin-right: 40px"
          size="mini"
          plain
          @click="exportData"
        >开始导出</el-button
        >
        <el-button
          type="primary"
          size="mini"
          plain
          class="cancel-button"
          @click="exportSwitch = false"
        >取消</el-button
        >
      </div>
    </el-drawer>
    <el-drawer
      ref="creativeStatusDrawerRef"
      title="关联广告"
      size="60%"
      :visible.sync="creativeAdSwitch"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :wrapperClosable="false"
      :modal="false"
      :append-to-body="true"
    >
      <el-divider></el-divider>
      <creative-status
        :current-creative="currentCreative"
        v-if="creativeAdSwitch"
      >
      </creative-status>
    </el-drawer>
    <el-drawer
      title="新增素材"
      size="80%"
      :visible.sync="addDrawer"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      :append-to-body="true"
      ref="drawer"
      @closed="closeDrawer"
    >
      <el-divider></el-divider>
      <div class="drawer__content">
        <div class="drawer__body">
          <product-creative-re
            :is-creative-still-request="0"
            ref="productCreativeReRef"
            @closed="closeAdd"
          ></product-creative-re>
        </div>
        <div style="display: flex; justify-content: center; margin-top: 40px">
          <el-button type="primary" size="mini" @click="save">保存</el-button>
          <el-button size="mini" @click="addDrawer = false">取消</el-button>
        </div>
      </div>
    </el-drawer>
    <el-dialog
      :visible="creativeInfoDialog.dialogVisible"
      width="80%"
      :modal-append-to-body="false"
      top="0px;"
      :close-on-click-modal="false"
      :append-to-body="true"
      style="text-align: center"
      :before-close="
          () => {
            creativeInfoDialog.dialogVisible = false;
          }
        "
    >
      <creative-info
        v-if="creativeInfoDialog.dialogVisible"
        :creative-id="creativeInfoDialog.creativeId"
      ></creative-info>
    </el-dialog>

    <el-dialog
      :visible="ttUploadProcessVisible"
      :modal-append-to-body="false"
      @close="TTProgressClose"
    >
      <div class="drawer__content">
        <div class="drawer__body">
          <el-table
            :data="ttUploadCountData"
            v-loading="ttUploadProcessLoading"
          >
            <el-table-column prop="platformId" label="账户ID" />
            <el-table-column prop="uploadTotal" label="上传总数" />
            <el-table-column prop="uploadCount" label="上传数量" />
            <el-table-column prop="progress" label="进度">
              <template slot-scope="{ row }">
                <el-progress
                  :percentage="row.progress"
                  :format="getFormat(row.progress)"
                ></el-progress>
              </template>
            </el-table-column>
            <el-table-column label="上传情况">
              <template slot-scope="{ row }">
                成功: {{ row.successCount }} / 失败: {{ row.failedCount }}
              </template>
            </el-table-column>
            <el-table-column label="错误信息">
              <template slot-scope="{ row }">
                <el-popover placement="right" width="400" trigger="click">
                  <el-table :data="row.errData">
                    <el-table-column
                      width="100"
                      property="name"
                      label="素材名称"
                    />
                    <el-table-column
                      width="300"
                      property="errMsg"
                      label="错误信息"
                    />
                  </el-table>
                  <el-button slot="reference">查看</el-button>
                </el-popover>
              </template>
            </el-table-column>
          </el-table>
          <div v-show="TTBatchUploading">
            <i class="el-icon-loading"></i>上传中...
          </div>
          <div class="drawer__content">
            <el-button
              type="danger"
              @click="handleReUploadTT"
              v-show="uploadTTRetryButtonShow"
            >重新上传</el-button
            >
          </div>
        </div>
      </div>
    </el-dialog>
  </basic-container>
</template>

<script>
import {queryWaterMarkOpen} from "@/api/system/client";
import {getSysDictList} from "@/api/system/dict";
import {
  add,
  changeLocalFilename,
  creativeGenWaterMark,
  disable,
  downloadCreatives,
  getDetail,
  getList,
  getNewLocalFilename,
  getOfferTags,
  remove,
  shareCreative,
  update,
  updateRemark,
  uploadToYoutube,
  clearDisable,
  getBtnVisible, updateCreativePlatforms,saveMaterialIds
} from "@/api/offer/creative";
import {getDetail as getOfferDetail} from "@/api/business/offer";
import * as accountService from "@/api/business/account"
import {getAccountsInfoByPLAndOffer} from "@/api/business/account"
import {getAllUser} from "@/api/user";
import {mapGetters} from "vuex";
import creativeDetail from "./components/creativeDetail";
import creativeCheck from "./components/creativeCheck";
import creativeAuditDetail from "./components/creativeAuditDetail";
import youtubeDialog from "./components/youtubeDialog";
import creativeTags from "@/views/offer/components/creativeTags";
import {createWebSocket} from "@/util/ws";
import {createEventHandler} from "@/util/events";
import store from "@/store/";
import ObsClient from "esdk-obs-browserjs";
import JSZip from "jszip"
import FileSaver from "file-saver"
import Moment from "moment";
import beetlesTable from "@/components/basic-components/beetles-table"
import {getOfferList} from "@/api/business/share";
import TooltipText from "@/components/basic-components/tooltipText";
import {
  batchUploadCreativeToTT,
  creativeExport,
  getUploadToTTLatestProgress,
  reUploadTTCreative
} from "../../api/offer/creative";
import {platformLogo} from '../../util/beetles';
import productCreativeRe from "./components/creativeRequest-components/productCreativeRe"
import CreativeCardPreview from "@/components/CreativeCardPreview/CreativeCardPreview";
import CreativeStatus from "./components/creativeStatus";
import creativeInfo from "@/views/creativeReport/components/creativeInfo";
import ttUploadDrawer from "./components/tiktokUploadDrawer"
import CsDrawerContainer from "@/components/CsDrawerContainer/CsDrawerContainer";
import _ from "lodash";
import {
  getBigoIndustryList,
  getKwwaiIndustryList,
  getTiktokIndustry,
  getWorkrooms
} from "@/api/accountOrTransfer/account";

/**
 * 最初一个素材一个平台，后来要求支持一个素材多个平台，因为一个素材多个平台会引起其他问题，所以又要求一个素材一个平台，但在素材库列表中，允许将一个素材复制到其他平台，图片连接保持不变。
 */
export default {
  name: 'Creative',
  components: {
    TooltipText,
    creativeDetail,
    creativeCheck,
    creativeAuditDetail,
    youtubeDialog,
    creativeTags,
    beetlesTable,
    productCreativeRe,
    CreativeCardPreview,
    CreativeStatus,
    creativeInfo,
    ttUploadDrawer,
  },
  data() {
    let checkShortId = (rule, value, callback) => {
      const shortReg = /^\d{3,6}$/;
      if (value !== "" && !shortReg.test(value)) {
        callback(new Error("请输入3-6位数字!"));
      } else {
        callback();
      }
    };
    return {
      requestUploadTTParam: {
        creativeIds: "",
        platformIds: "",
      },
      ttUploadTimerMaxFetch: 0,
      ttUploadProcessLoading: false,
      TTBatchUploading: false,
      uploadTTTotal: 0,
      ttProgressTableShow: false,
      ttUploadProgressData: [],
      ttUploadCountData: [],
      uploadTTTimer: null,
      creativesLen: 0,
      accountCreative: [],
      progressList: [],
      searchAccounts: [],
      searchAccountNames: [],
      searchOperators: [],
      checkList: [],
      exportSwitch: false,
      creativeAdSwitch: false,
      detailInfo: {},
      offerInfoBak: null,
      btnVisible: false,
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近两周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 14);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "所有",
            onClick(picker) {
              const end = "";
              const start = "";
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      creativeTagsData: [],
      creativeTagsSnapshot: {}, //当前订单下的标签
      creativeTagsDialog: false, //素材标签
      waterMarkOpen: true,
      stauts: {
        0: ["black", "等待提交"],
        1: ["black", "等待审核"],
        2: ["black", "审核通过"],
        3: ["red", "审核拒绝"],
        4: ["orange", "禁用"],
      },
      error: "",
      upIcon: "el-icon-arrow-down",
      searchIcon: "el-icon-search",
      emptyIcon: "el-icon-delete",
      searchConceal: false,
      localFilenameEdit: {
        editEnable: false,
        editIndex: "",
        newVal: "",
      },
      remarkEdit: {
        editEnable: false,
        editIndex: "",
        newVal: "",
      },
      youtobeLoading: false, //油管上传加载
      youtubeOldLoading: false, // 油管上传(旧)
      comment: "",
      detailDialog: false, //弹出框开关
      dialogTitle: "", //弹出框的title
      checkDialog: false, //检查弹出框开关
      detailData: {},
      checkData: {},
      form: {
        type: "",
        platform: "",
        status: "",
        designer: "",
        originator: "",
        stringShortId: "",
        name: "",
        requestName: "",
        tags: "",
        localFilename: "",
        createType: 0,
        sizeType: "",
        remark: "",
        beginDate: null,
        endDate: null,
        used: "",
        adCreativeStatus: "",
        beginAuditDate: "",
        qUsedStatus:'',
      },
      submissionTime: null,
      adCreativeStatus: null,
      qUsedStatus:null,
      rules: {
        shortId: [
          { required: false, validator: checkShortId, trigger: "change" },
        ],
      },
      query: {},
      loading: false,
      dialogFormVisible: false,
      page: {
        pageSize: 15,
        currentPage: 1,
        total: 0,
        offerId: store.state.user.offer,
        pageSizes: [10, 15, 20, 30, 40, 50, 100],
      },
      selectionList: [],
      dataType: [
        {
          //图片视频下拉
          value: "0",
          label: "图片",
        },
        {
          value: "1",
          label: "视频",
        },
      ],
      approvalStatusList: [
        { label: "等待提交", value: 0 },
        { label: "等待审核", value: 1 },
        { label: "审核通过", value: 2 },
        { label: "审核拒绝", value: 3 },
        { label: "禁用", value: 4 },
      ],
      sizeType: [
        { label: "横幅", value: "H" },
        { label: "竖幅", value: "V" },
        { label: "方幅", value: "S" },
      ],
      usedList: [
        { label: "所有", value: " " },
        { label: "是", value: "true" },
        { label: "否", value: "false" },
      ],
      adCreativeStatusList: [
        { value: "1", label: "在线-正常" },
        { value: "2", label: "在线-受限" },
        { value: "3", label: "不在线-违规" },
        { value: "0", label: "不在线-停止" },
      ],
      platformOption: [
        { value: "google", label: "google", url: "/img/icon/google-icon.png" },
        {
          value: "facebook",
          label: "facebook",
          url: "/img/icon/facebook-icon.png",
        },
        { value: "bigo", label: "bigo", url: "/img/icon/bigo-icon.png" },
        { value: "tiktok", label: "tiktok", url: "/img/icon/tiktok-icon.png" },
        { value: "kwai", label: "kwai", url: "/img/icon/kwai-icon.png" },
        {
          value: "eagllwin",
          label: "eagllwin",
          url: "/img/icon/eagllwin-icon.png",
        },
      ],
      option: {
        calcHeight: 30,
        tip: false,
        searchShow: true,
        searchMenuSpan: 24,
        border: true,
        index: true,
        selection: true,
        // 跨页勾选
        reserveSelection: true,
        addBtn: false,
        editBtn: false,
        viewBtn: false,
        delBtn: false,
        menuWidth: 140,
        dialogClickModal: false,

        column: [
          {
            label: "短Id",
            prop: "shortId",
            fixed: true,
            searchSize: "mini",
            overHidden: true,
            width: 90,
          },
          {
            label: "素材名称",
            prop: "name",
            addDisplay: false,
            // overHidden: true,
            searchSize: "mini",
          },
          {
            label: "类型",
            prop: "type",
            addDisplay: false,
            editDisplay: false,
            type: "select",
            searchSize: "mini",
            dicData: [
              { label: "图片", value: 0 },
              { label: "视频", value: 1 },
            ],
            overHidden: true,
          },
          {
            label: "本地文件名",
            prop: "localFilename",
            addDisplay: false,
            editDisplay: false,
            fixed: false,
            width: 276,
            searchSize: "mini",
          },
          {
            label: "媒体",
            prop: "platform",
            multiple: true,
            type: "select",
            dataType: "string",
            dicData: [],
            props: {
              label: "dictValue",
              value: "dictKey",
            },
            searchMultiple: true,
            rules: [
              {
                required: true,
                message: "请输入名称",
                trigger: "blur",
              },
            ],
            searchSize: "mini",
          },
          {
            label: "是否有花费",
            prop: "used",
            width: 85,
            addDisplay: false,
            editDisplay: false,
            overHidden: true,
            hide: false,
          },
          {
            label: "使用情况",
            prop: "usedStatus",
            width: 85,
            addDisplay: false,
            editDisplay: false,
            overHidden: true,
            hide: false,
          },
          {
            label: "当前在线/所有关联广告数",
            prop: "onlineAdScale",
            width: 180,
            addDisplay: true,
            editDisplay: false,
            overHidden: true,
            hide: false,
          },
          {
            label: "当前投放状态",
            prop: "adCreativeStatus",
            width: 120,
            addDisplay: false,
            editDisplay: false,
            overHidden: true,
            hide: false,
            headerslot: true,
          },
          {
            label: "素材",
            prop: "creativeUrl2",
            fixed: true,
          },
          {
            label: "标签",
            prop: "tags",
            width: 320,
            rules: [
              {
                required: true,
                message: "请输入标签",
                trigger: "blur",
              },
            ],
            overHidden: true,
            searchSize: "mini",
          },
          {
            label: "需求名称",
            prop: "ownedDemandName",
            overHidden: true,
            hide: false,
          },
          {
            label: "油管链接",
            prop: "youtubeLink",
            width: 170,
            rules: [
              {
                required: true,
                message: "请输入油管链接",
                trigger: "blur",
              },
            ],
            overHidden: true,
          },
          {
            label: "设计者",
            prop: "designer",
            searchSize: "mini",
            rules: [
              {
                required: true,
                message: "请输入设计者",
                trigger: "blur",
              },
            ],
            type: "select",
            //dicUrl: "/api/beetles-offer/creative/get-exist-designer",
            // dicUrl: "/api/blade-user/select/user?statusList=0,1,2",
            props: {
              label: "realName",
              value: "id",
            },
            overHidden: true,
          },
          {
            label: "原创者",
            prop: "originator",
            type: "select",
            searchSize: "mini",
            // dicUrl: "/api/blade-user/select/user?statusList=0,1,2",
            props: {
              label: "realName",
              value: "id",
            },
            overHidden: true,
          },
          {
            label: "备注",
            prop: "remark",
            addDisplay: false,
            editDisplay: false,
            width: 120,
            // overHidden: true,
          },
          {
            label: "第一次使用时间",
            prop: "firstUseTime",
            addDisplay: false,
            editDisplay: false,
            width: 110,
          },
          {
            label: "审核完成时间",
            prop: "auditTime",
            addDisplay: false,
            editDisplay: false,
            overHidden: true,
            width: 120,
            sortable: true,
          },
          {
            label: "审批状态",
            prop: "status",
            type: "select",
            addDisplay: false,
            editDisplay: false,
            dicData: [
              { label: "等待提交", value: 0 },
              { label: "等待审核", value: 1 },
              { label: "审核通过", value: 2 },
              { label: "审核拒绝", value: 3 },
              { label: "禁用", value: 4 },
            ],
            searchSize: "mini",
            rules: [
              {
                required: true,
                message: "请输入标签",
                trigger: "blur",
              },
            ],
            overHidden: true,
          },
          {
            label: "创建时间",
            prop: "createTime",
            overHidden: true,
          },
        ],
      },
      data: [],
      useType: "add",
      dataList: null,
      visible: false,
      platformsList: [],
      designersList: [],
      originatorList: [],
      offerList: [],
      offerIds: [],
      remark: "",
      mediaPreviewDialog: {
        dialogVisible: false,
        dialogType: "image", //image or video
        previewUrl: "",
      },
      isAdvSharedOffer: true,
      youTubeIds: "",
      reUploadInfo: [],
      youTubeUploading: false,
      // marco
      // 当前素材
      currentCreative: null,
      // 添加抽屉
      addDrawer: false,
      sortList: [],
      // 素材预览对象
      creativeInfoDialog: {
        dialogVisible: false,
        name: "",
        creativeId: "",
      },
      uploadTTDrawer: false,
      accountList: [],
      accountform: {
        name: undefined,
        platformId: undefined,
        operator: undefined,
        platform: "tiktok",
      },
      offerIdList: [],
      uploadTTPage: {
        current: 1,
        size: 10,
      },
      creativeTotal: 0,
      uploadTTLoading: false,
      multipleCreativeSelection: [],
      ttUploadProcessVisible: false,
      uploadTTRetryButtonShow: false,
      needReUpload: false,
      failedQueue: [],
    };
  },
  computed: {
    ...mapGetters(["permission", "roles", "offer"]),
    ...mapGetters(["userInfo", "token"]),

    permissionList() {
      return {
        addBtn: this.vaildData(this.permission.creative_add, false),
        // viewBtn: this.vaildData(this.permission.creative_view, false),
        delBtn: this.vaildData(this.permission.creative_delete, false),
        editBtn: this.vaildData(this.permission.creative_edit, false),
      };
    },
    ids() {
      let ids = [];
      this.selectionList.forEach((ele) => {
        ids.push(ele.id);
      });
      return ids.join(",");
    },
    exportFieldList() {
      let result = [];
      this.option.column.forEach((item) => {
        if (
          !(item.prop == "onlineAdScale" || item.prop == "adCreativeStatus")
        ) {
          result.push(item);
        }
      });
      return result;
    },
  },
  mounted() {
    let self = this;
    self.isRefreshing = false;
    if (!self.socket) {
      self.socket = createWebSocket("/api/blade-system/wss", "json");
      if (self.socket)
        self.socket.ontextmessage = (msg) => {
          let msgObj = JSON.parse(msg);
          //console.log("socket receive:" + msg)
          if (msgObj) {
            if (
              !self.isRefreshing &&
              msgObj.messageName === "tenantMessage" &&
              msgObj.data.messageName === "creativeChanged" &&
              msgObj.data.offerId == self.page.offerId
            ) {
              if (msgObj.data.creativeIds != null) {
                let creativeIdList = msgObj.data.creativeIds.split(",");
                if (
                  self.data.find((v) => {
                    return creativeIdList.includes(v.id);
                  }) == null
                ) {
                  return;
                }
              }
              self.isRefreshing = true;
              //不要删除，用以跟踪问题
              console.log("WebSocket Message of CreativePage:" + msg);
              //不可以频繁刷新，如果有刷新需求，延迟5秒刷新，在延迟期间，有新的刷新需求均不会多次触发onLoad
              setTimeout(() => {
                self.onLoad(self.page);
                self.isRefreshing = false;
              }, 5000);
            }
          }
        };
      if (self.socket)
        self.socket.onerror = () => {
          this.$message({
            type: "warning",
            message: "您的网络目前不稳定，数据可能不能自动刷新！",
          });
        };
    }
    setTimeout(() => {
      self.initPage();
    }, 500);
  },
  beforeRouteLeave(to, form, next) {
    let self = this;
    if (self.socket) {
      self.socket.close();
      self.socket = null;
    }
    if (self.eventHandler) {
      self.eventHandler.clear();
    }
    next();
  },
  created() {
    getBtnVisible().then((res) => {
      if (res.data.success) {
        this.btnVisible = true;
      }
    });
    getOfferList(this.userInfo.user_id, "1,2,3").then((res) => {
      this.offerList = res.data.data;
      // console.log(this.offerList);
      let ids=[];
      this.offerList.forEach((item) => {
        let obj = {
          label: item.name,
          value: item.id,
        };
        ids.push(obj);
        this.$set(this, 'offerIds', ids)
      });
    });
    queryWaterMarkOpen().then((res) => {
      res.data.data.map((res) => {
        if (res.variableKey === "open" && res.variableValue === "0") {
          this.waterMarkOpen = false;
        }
      });
    });
    //window.addEventListener('keyup', this.searchForm) //监听键盘事件
    let self = this;
    this.eventHandler = createEventHandler("offerCenter").addListener(
      (event) => {
        if (
          event.message == "offerChanged" &&
          event.offerId &&
          event.offerId !== ""
        ) {
          self.page.offerId = event.offerId;
          self.onLoad(self.page);
          self.updateIsAdvSharedOffer();
        }
        if (
          event.message == "initPage" &&
          event.offerId &&
          event.offerId !== ""
        ) {
          setTimeout(() => {
            self.initPage();
          }, 500);
        }
        this.$refs.productCreativeReRef.init();
      }
    );

    this.page.offerId = store.state.user.offer;
    getSysDictList("platforms").then((map) => {
      this.platformsList = map["platforms"];
      let column = this.findObject(this.option.column, "platform");
      column.dicData = this.platformsList;
    });
    getAllUser({ statusList: "0,1,2", isAll: true }).then((res) => {
      this.designersList = res.data.data;
      this.originatorList = res.data.data;
    });
    this.updateIsAdvSharedOffer();
  },
  methods: {
    getFormat(progress) {
      return `${progress}%`;
    },
    sortChange(val) {
      let prop = val.prop;
      let orderBy = null;
      if (val.order === "descending") {
        orderBy = "desc";
        //向上排序
      } else if (val.order === "ascending") {
        orderBy = "asc";
        //不排序
      }
      if (orderBy != null) {
        this.sortList = [{ name: prop, orderBy: orderBy }];
      } else {
        this.sortList = [];
      }
      this.page.currentPage = 1;
      this.onLoad(this.page);
    },
    showHide() {
      this.$refs.crud.showHide();
    },
    /*导出数据*/
    exportData() {
      let noSelect = [];
      this.option.column.forEach((item) => {
        if (!this.checkList.includes(item.label)) {
          noSelect.push(item.prop);
        }
      });
      let data = {
        excludeColumnFiledNames: noSelect,
        offerId: this.offer,
      };
      Object.assign(data, this.query);

      creativeExport(data).then((res) => {
        let filename = window.decodeURI(
          res.headers["content-disposition"].split("=")[1]
        );
        let url = window.URL.createObjectURL(new Blob([res.data]));
        let link = document.createElement("a");
        link.style.display = "none";
        link.href = url;
        link.download = filename;
        document.body.appendChild(link);
        link.click();
      });
    },
    uploading() {
      this.exportSwitch = true;
      this.option.column.forEach((item) => {
        this.checkList.push(item.label);
      });
    },
    tagsColor(i) {
      switch (i) {
        case 0:
          return "#E74C3C";
        case 1:
          return "#2ECC71";
        case 2:
          return "#2980B9";
        case 3:
          return "#8E44AD";
        case 4:
          return "#2C3E50";
        case 5:
          return "#F1C40F";
        case 6:
          return "#95A5A6";
      }
    },
    addTagsModel() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      this.creativeTagsSnapshot = {};
      //判断当前订单下是否有标签
      getOfferTags(this.selectionList[0].offerId)
        .then((res) => {
          if (res.data.code === 200) {
            this.creativeTagsSnapshot = res.data.data;
            this.creativeTagsData = [];
            this.creativeTagsData = [...this.selectionList];
            this.creativeTagsDialog = true;
          }
        })
        .catch((err) => {
          if (err) {
            return;
          }
        });
    },
    //返回
    tagsGetBack() {
      this.selectionClear();
      this.creativeTagsDialog = false;
      this.onLoad(this.page);
    },
    unfoldIcon() {
      if (this.upIcon === "el-icon-arrow-down") {
        this.upIcon = "el-icon-arrow-up";
        this.searchConceal = true;
      } else {
        this.upIcon = "el-icon-arrow-down";
        this.searchConceal = false;
      }
    },
    isShowSelectOptions(isShowSelectOptions) {
      if (!isShowSelectOptions) this.$refs.createType.blur();
      if (!isShowSelectOptions) this.$refs.createPlatform.blur();
      if (!isShowSelectOptions) this.$refs.createStatus.blur();
      if (!isShowSelectOptions) this.$refs.createDesigner.blur();
      if (!isShowSelectOptions) this.$refs.createOriginator.blur();
    },
    initPage() {
      let self = this;
      let initPageInfo = window.sessionStorage.getItem("initPageInfo");
      if (initPageInfo == null || initPageInfo == "") {
        return;
      }
      let param = JSON.parse(initPageInfo);
      let offerId = param.offerId;
      if (
        self.offer == offerId &&
        param.ropList != null &&
        param.ropList.length > 0
      ) {
        let ropList = [];
        let hasAction = false;
        for (let i = 0; i < param.ropList.length; i++) {
          if (param.ropList[i].rop == "creativeDetail") {
            let rid = param.ropList[i].rid;
            param.ropList[i] = null;
            self.handleCheckById(rid);
            hasAction = true;
          } else {
            ropList.push(param.ropList[i]);
          }
        }
        if (hasAction) {
          param.ropList = ropList;
          window.sessionStorage.setItem("initPageInfo", JSON.stringify(param));
        }
      }
    },

    //搜索按钮函数
    searchForm() {
      if (this.submissionTime != null) {
        this.form.beginDate = this.submissionTime[0];
        this.form.endDate = this.submissionTime[1];
      } else {
        this.form.beginDate = "";
        this.form.endDate = "";
      }
      if (this.adCreativeStatus != null) {
        this.form.adCreativeStatus = this.adCreativeStatus.join(",");
      }
      if(this.qUsedStatus !== null){
        this.form.qUsedStatus=this.qUsedStatus.join(",");
      }
      this.$refs.form.validate((valid) => {
        if (valid) {
          let params = {};
          params = Object.assign(params, this.form);
          if (params.status != null) {
            params.strStatus = params.status.join(",");
          }
          params.status = undefined;
          console.log("params", params);
          this.query = params;
          this.page.currentPage = 1;
          this.onLoad(this.page, params);
        }
      });
    },
    //清空按钮函数
    emptyForm() {
      this.form = {
        type: null,
        platform: null,
        status: null,
        designer: null,
        originator: null,
        stringShortId: "",
        name: null,
        requestName: null,
        tags: null,
        localFilename: null,
        sizeType: "",
        remark: "",
        beginDate: null,
        endDate: null,
        used: "",
        adCreativeStatus: "",
        beginAuditDate: "",
        qUsedStatus:''
      };
      this.qUsedStatus=null;
      this.submissionTime = null;
      this.adCreativeStatus = null;
      this.query = this.form;
      this.onLoad(this.page, this.form);
    },
    /**
     * 本地文件名双击事件
     */
    rowDbclick(row, column) {
      // console.log(row, column)
      if (column.property)
        if (
          ["shortId", "name", "localFilename", "youtubeLink"].includes(
            column.property
          )
        ) {
          this.copyText(column.property, row[column.property]);
        } else if (column.property === "platform") {
          row.plfSwitch = true;
          this.$nextTick(() => {
            // console.log(this.$refs)
            this.$refs["plfSelect" + row.id].focus();
          });
        }
    },
    /**
     * 关闭本地文件名
     */
    rowClick(row, column) {
      if (column.property)
        if (
          column.property !== "localFilename" ||
          this.localFilenameEdit.editIndex != row.$index
        ) {
          this.localFilenameEdit.editEnable = false;
        }
    },
    localFilenameEditEnable(row) {
      this.localFilenameEdit.newVal = row.localFilename;
      this.localFilenameEdit.editIndex = row.$index;
      this.localFilenameEdit.editEnable = true;
    },
    remarkEditEnable(row) {
      this.remarkEdit.newVal = row.remark;
      this.remarkEdit.editIndex = row.$index;
      this.remarkEdit.editEnable = true;
    },
    //修改备注
    changeRemark(row) {
      if (this.remarkEdit.newVal == "") {
        return;
      }
      if (row.remarkEdit == this.remarkEdit.newVal) {
        this.remarkEdit.editEnable = false;
        return;
      }
      // this.$confirm('你确定要修改备注吗?', '提示', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: 'warning'
      // }).then(() => {
      updateRemark(row.id, this.remarkEdit.newVal).then(() => {
        row.remark = this.remarkEdit.newVal;
        this.remarkEdit.editEnable = false;
        this.$message({
          type: "success",
          message: "修改成功!",
        });
      });
      // }).catch(() => {
      //   this.$message({
      //     type: 'info',
      //     message: '放弃修改!'
      //   });
      //   this.remarkEdit.editEnable = false;
      // });
    },
    /**
     * 修改本地文件名
     */
    changeLocalFilename(row) {
      if (this.localFilenameEdit.newVal == "") {
        return;
      }
      if (row.localFilename == this.localFilenameEdit.newVal) {
        this.localFilenameEdit.editEnable = false;
        return;
      }
      this.$confirm("你确定要修改本地文件名称吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          getNewLocalFilename(row.id, this.localFilenameEdit.newVal).then(
            (res) => {
              let newLocalFilename = res.data.data;
              if (newLocalFilename == this.localFilenameEdit.newVal) {
                changeLocalFilename(this.localFilenameEdit.newVal, row.id).then(
                  () => {
                    row.localFilename = this.localFilenameEdit.newVal;
                    this.localFilenameEdit.editEnable = false;
                    this.$message({
                      type: "success",
                      message: "修改成功!",
                    });
                  }
                );
              } else {
                this.$message.warning("本地文件名重复，请重新输入");
              }
            }
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "放弃修改!",
          });
          this.localFilenameEdit.editEnable = false;
        });
    },
    /**
     * 复制youtube链接
     */
    copyText(prop, value) {
      if (
        value == "" ||
        (prop == "youtubeLink" && value.indexOf("http") == -1)
      ) {
        return;
      }
      var input = document.createElement("input");
      //将input的值设置为需要复制的内容
      input.value = value;
      //添加input标签
      document.body.appendChild(input);
      //选中input标签
      input.select();
      //执行复制
      document.execCommand("copy");
      //成功提示信息

      this.$message.success("复制成功!");
      //移除input标签
      document.body.removeChild(input);
    },

    previewStyle() {
      let height = window.innerHeight < 300 ? 300 : window.innerHeight - 160;
      return {
        maxWidth: "100%",
        maxHeight: height + "px",
      };
    },
    setIsAdvSharedOfferChanged(val) {
      let self = this;
      self.isAdvSharedOffer = val;
      let column = self.findObject(self.option.column, "ownedDemandName");
      if (column != null && column != -1) {
        column.hide = val;
      }
    },
    updateIsAdvSharedOffer() {
      let self = this;
      if (self.userInfo.is_agency == 0) {
        self.loadOfferInfo(self.page.offerId, (offerInfo) => {
          if (offerInfo) {
            self.setIsAdvSharedOfferChanged(offerInfo.isShared == 1);
          } else {
            self.setIsAdvSharedOfferChanged(false);
          }
        });
      } else {
        self.setIsAdvSharedOfferChanged(false);
      }
    },
    loadOfferInfo(offerId, success) {
      if (offerId != null && offerId != "" && success) {
        getOfferDetail(offerId)
          .then((res) => {
            success(res.data.data);
          })
          .catch(() => {
            success(null);
          });
      }
    },
    designerChange(val) {
      let list = [];
      this.designersList.map((item) => {
        val.map((i) => {
          if (i === item.id) {
            list.push(item.realName);
          }
        });
      });
      if (list.length === 0) {
        return val[0];
      }
      return list.join(",");
    },
    originatorChange(val) {
      let list = [];
      this.originatorList.map((item) => {
        val.map((i) => {
          if (i === item.id) {
            list.push(item.realName);
          }
        });
      });
      if (list.length === 0) {
        return val[0];
      }
      return list.join(",");
    },
    //禁用
    handleDisable() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      let getOut = false;
      this.selectionList.map((item) => {
        if (item.status === 4) {
          getOut = true;
        }
      });
      if (getOut) {
        this.$message({
          type: "warning",
          message: "素材已是禁用状态",
        });
        return;
      }
      this.$confirm("此操作将禁用素材, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //请求接口
          let list = [];
          this.selectionList.map((item) => {
            list.push(item.id);
          });
          let data = {
            creativeIds: list.join(","),
          };
          disable(data).then((res) => {
            if (res.data.success) {
              this.$message({
                type: "success",
                message: "禁用成功!",
              });
              this.onLoad(this.page, this.query);
              this.selectionClear();
            }
          });
        })
        .catch(() => {
          this.$refs.crud.toggleSelection();
          this.$message({
            type: "info",
            message: "已取消禁用",
          });
        });
    },
    async clearDisable() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      let list = [];
      this.selectionList.map((item) => {
        list.push(item.id);
      });
      let data = {
        creativeIds: list.join(","),
      };
      let result = await clearDisable(data);
      console.log(result);
      if (result.status == 200) {
        this.$message.success("已解除禁用");
      }
      this.onLoad(this.page, this.query);
      this.selectionClear();
    },
    waterUrlDisabledNameList(creativeList) {
      let invalidWaterUrlCreativeNameList = [];
      creativeList.forEach((item) => {
        if (!item.waterUrl || item.waterUrl == "-1" || item.waterUrl == "-2") {
          invalidWaterUrlCreativeNameList.push(item.name);
        }
      });
      return invalidWaterUrlCreativeNameList;
    },
    downCreative() {
      this.dialogFormVisible = false;
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },
    unDownCreative() {
      this.dialogFormVisible = true;
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },
    handleGenWaterMark() {
      let idList = [];
      if (this.selectionList) {
        this.selectionList.forEach((row) => {
          idList.push(row.id);
        });
      }
      creativeGenWaterMark(this.offer, idList.join(",")).then((res) => {
        if (res.data.success) {
          this.$message.success("已成功发送请求，1分钟后请刷新页面查看结果");
        } else {
          this.$message.success("发送请求失败");
        }
      });
    },
    //审核
    handleExamine() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      const selectionStatusList = this.selectionList.map((item) => item.status);
      // const selectionStatusList1 = this.selectionList.map(item => item.used)
      // console.log(this.selectionList)
      if (selectionStatusList.includes(4)) {
        this.$message.warning("禁用状态素材不可提交审核哦！");
        return;
      }
      let invalidWaterUrlCreativeNameList = this.waterUrlDisabledNameList(
        this.selectionList
      );
      if (invalidWaterUrlCreativeNameList.length > 0) {
        this.$message({
          dangerouslyUseHTMLString: true,
          showClose: true,
          message:
            "您所提审的素材正在生成水印。<br>正在生成水印的素材是：<br>" +
            invalidWaterUrlCreativeNameList.join("<br>"),
          type: "warning",
          duration: 3000,
        });
        return;
      }
      this.visible = true;
      let ids = [];
      this.selectionList.map((item) => {
        ids.push(item.id);
      });
      this.dataList = { listId: ids.join(","), offerId: this.page.offerId };
    },
    handleAdd() {
      // this.detailDialog = true;
      this.dialogTitle = "add";
      // this.checkDialog = true
      this.addDrawer = true;
    },
    handleUploadToYoutubeOld() {
      this.youtubeOldLoading = true;
      let selectedList = this.selectionList;
      // 判断是否选择了数据
      if (selectedList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        this.youtubeOldLoading = false;
        return;
      }
      // 判断是否都是视频
      let videoList = selectedList.filter((item) => item.type === 1);
      if (videoList.length !== selectedList.length) {
        this.$message.warning("图片不支持上传到油管哦！");
        this.youtubeOldLoading = false;
        return;
      }
      // 取出全部id，以逗号隔开上传到后台
      let ids = [];
      videoList.forEach((ele) => {
        // 只上传没有youtubeLink的素材
        let link = ele.youtubeLink;
        if (link === "" || null === link || !link.startsWith("https")) {
          ids.push(ele.id);
        }
      });
      if (ids.length === 0) {
        this.$message({
          type: "warning",
          message: "油管连接已经存在，无需继续上传!",
        });
        this.youtubeOldLoading = false;
        return;
      }

      this.$message({
        type: "success",
        message: "上传时间较长,您无需等待,上传完毕后,界面自动刷新!",
      });
      // 上传素材到youtube
      uploadToYoutube(ids.join(",")).then(
        () => {
          this.youtubeOldLoading = false;
          this.onLoad(this.page);
        },
        (error) => {
          if (error) {
            this.youtubeOldLoading = false;
          }
        }
      );
    },
    handleUploadToYoutube() {
      let selectedList = this.selectionList;
      // 判断是否选择了数据
      if (selectedList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        // this.youtobeLoading = false
        return;
      }
      // 判断是否都是视频
      let videoList = selectedList.filter((item) => item.type === 1);
      if (videoList.length !== selectedList.length) {
        this.$message.warning("图片不支持上传到油管哦！");
        // this.youtobeLoading = false
        return;
      }
      // 取出全部id，以逗号隔开上传到后台
      let ids = [];
      let reUploadInfo = [];
      videoList.forEach((ele) => {
        let link = ele.youtubeLink;
        if (link.startsWith("https")) {
          let info = _.cloneDeep(ele);
          ids.push(ele.id);
          reUploadInfo.push(info);
        }
      });
      if (ids.length !== 0) {
        this.$confirm(
          "重新上传将会覆盖所选素材原有的油管链接, 是否继续？",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
          .then(() => {
            this.youtobeLoading = true;
            // let vids = _.cloneDeep(videoList.filter(item => !ids.includes(item.id)));
            // let yids = vids.map(cre => {return cre.id})
            // this.youTubeIds = yids.join(",")
            this.youTubeIds = videoList
              .map((cre) => {
                return cre.id;
              })
              .join(",");
            this.reUploadInfo = reUploadInfo;
            // console.log("youTubeIds ",  this.youTubeIds)
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消",
            });
          });
      } else {
        this.youtobeLoading = true;
        this.youTubeIds = videoList
          .map((cre) => {
            return cre.id;
          })
          .join(",");
      }
    },
    handleUploadToTT() {
      let selectedList = this.selectionList;
      // 判断是否选择了数据
      if (selectedList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        // this.youtobeLoading = false
        return;
      }
      this.uploadTTDrawer = true;
      //   let strofferId=null
      //   if (this.offerIdList == undefined) {
      //     strofferId=this.offer
      //   } else {
      //     this.offerIdList;
      //     strofferId = this.offerIdList.join(",");
      //   }
      //   let pm = {
      //     platform: "tiktok",
      //     offerIds: strofferId,
      //   };
      //   getAccountsInfoByPLAndOffer(pm).then((res) => {
      //     this.searchAccounts = res.data.data.searchAccounts;
      //     this.searchAccountNames = res.data.data.searchAccountNames;
      //     this.searchOperators = res.data.data.searchOperators;
      //   });
      this.getTTAccountTableData();
    },
    TTProgressClose() {
      this.ttUploadCountData = [];
      this.failedQueue = [];
      this.multipleCreativeSelection = [];
      this.accountCreative = [];
      this.progressList = [];
      this.creativesLen = 0;
      this.TTBatchUploading = false;
      this.ttUploadProcessVisible = false;
      this.ttUploadTimerMaxFetch = 0;
      this.requestUploadTTParam = {
        creativeIds: "",
        platformIds: "",
      };
      this.TTTimerEnd(this.uploadTTTimer);
      this.closeTT();
    },
    closeTT() {
      this.uploadTTDrawer = false;
      this.selectionClear();
      this.refreshChange();
    },
    handleAccountSelectionChange(val) {
      this.multipleCreativeSelection = val;
    },
    handleAccountSizeChange(val) {
      this.uploadTTPage.size = val;
      this.uploadTTPage.current = 1;
      this.getTTAccountTableData();
    },
    handleAccountCurrentChange(val) {
      this.uploadTTPage.current = val;
      this.getTTAccountTableData();
    },
    async getTTAccountTableData() {
      this.uploadTTLoading = true;
      let strofferId=null
      if (this.offerIdList.length == 0) {
        strofferId=this.offer
      } else {
        this.offerIdList;
        strofferId = this.offerIdList.join(",");
      }
      const { data: res } = await accountService
        .getList(this.uploadTTPage.current, this.uploadTTPage.size, {
          offerIdList: strofferId,
          platform: "tiktok",
          ...this.accountform,
        })
        .finally(() => {
          this.uploadTTLoading = false;
        });
      this.accountList = res.data.records;
      this.creativeTotal = res.data.total;
      let pm = {
        platform: "tiktok",
        offerIds: strofferId,
      };
      getAccountsInfoByPLAndOffer(pm).then((res) => {
        console.log(res.data.searchAccounts);
        this.searchAccounts = res.data.data.searchAccounts;
        this.searchAccountNames = res.data.data.searchAccountNames;
        this.searchOperators = res.data.data.searchOperators;
      });
    },
    submitTTUpload() {
      if (this.multipleCreativeSelection.length === 0) {
        this.$message.warning("请选择至少一个账户");
        this.closeTT();
        // this.youtobeLoading = false
        return;
      }
      let creatives = [];
      let platformIds = [];
      this.selectionList.forEach((item) => {
        creatives.push(item.id);
      });
      this.multipleCreativeSelection.forEach((item) => {
        // platformIds.push(item.platformId)
        platformIds.push({
          id:item.id,
          platformId:item.platformId,
          offerId:item.offerId
        });
      });
      this.requestUploadTTParam = {
        creativeIds: creatives.join(","),
        accountList: platformIds,
      };
      console.log(this.requestUploadTTParam)
      let uploadTTCreatives = [];
      let progressInfos = [];
      this.multipleCreativeSelection.forEach((item) => {
        let uploadTTCv = {
          platformId: item.platformId,
          creativeIds: creatives,
        };
        let progressInfo = {
          platformId: item.platformId,
          createUser: this.userInfo.user_id,
        };
        uploadTTCreatives.push(uploadTTCv);
        progressInfos.push(progressInfo);
      });
      this.progressList = progressInfos;
      this.accountCreative = uploadTTCreatives;
      this.creativesLen = this.selectionList.length;
      batchUploadCreativeToTT(this.requestUploadTTParam)
        .then((res) => {
          // if (res.data === true){
          //
          // } else {
          //   this.$message.warning("批量上传请求失败");
          // }
          this.handleTTProgress();
        })
        .catch((err) => {
          this.$message.error("批量上传请求失败, err:" + err);
        });
    },
    handleTTProgress() {
      this.ttUploadProcessLoading = true;
      this.ttUploadProcessVisible = true;
      this.uploadTTTotal = this.creativesLen * this.accountCreative.length;
      this.uploadTTTimer = setInterval(() => {
        if (this.ttUploadTimerMaxFetch >= 300) {
          console.log("end,", this.uploadTTTimer);
          this.TTTimerEnd(this.uploadTTTimer);
          this.$message.warning("超过处理时长上限5min,请重新上传");
          this.uploadTTRetryButtonShow = true;
        } else {
          let done = 0;
          getUploadToTTLatestProgress(this.requestUploadTTParam)
            .then((res) => {
              this.ttUploadProcessLoading = false;
              this.TTBatchUploading = true;
              let prg = this.parseProgressList(res);
              if (!prg.apiSuccess) {
                return;
              }
              done = prg.done;
              this.needRetry = prg.needRetry;
              this.ttUploadCountData = prg.doneInfos;
              this.failedQueue = prg.failedQueue;
              this.$forceUpdate();
            })
            .finally(() => {
              this.ttUploadTimerMaxFetch += 1;
              if (done === this.uploadTTTotal) {
                this.TTBatchUploading = false;
                this.uploadTTRetryButtonShow = this.needRetry;
                console.log("end,", this.uploadTTTimer);
                this.TTTimerEnd(this.uploadTTTimer);
              }
            });
        }
      }, 2000);
    },
    TTTimerStart(func) {
      // 将定时器名字赋值到变量中
      let timer = setInterval(() => {
        func();
      }, 1000);
    },
    TTTimerEnd(tmr) {
      clearInterval(tmr);
      tmr = null; // 这里最好清除一下，回归默认值
      // 众所周知，定时器返回一个随机整数，用于表示定时器的编号，后面通过名字可以取消这个定时器的执行。
      console.log(tmr);
    },
    handleReUploadTT() {
      if (this.failedQueue.length !== 0) {
        this.ttUploadTimerMaxFetch = 0;
        this.uploadTTRetryButtonShow = false;
        batchUploadCreativeToTT(this.requestUploadTTParam)
          .then((res) => {
            this.handleTTProgress();
          })
          .catch((err) => {
            this.$message.error("批量上传请求失败, err:" + err);
          });
      }
    },
    parseProgressList(res) {
      let result = {
        done: 0,
        apiSuccess: false,
        needRetry: false,
        prgInfos: [],
        doneInfos: [],
        failedQueue: [],
      };
      if (res.data !== null && res.data.data.length !== 0) {
        result.apiSuccess = true;
        res.data.data.forEach((item) => {
          let progr = {
            platformId: item.platformId,
            createUser: item.createUser,
            uploadCount: 0,
            successCount: 0,
            failedCount: 0,
            uploadTotal: this.creativesLen,
            progress: 0,
            retryIds: [],
            errData: [],
          };
          let creativeInfo = item.creativeInfo;
          if (
            creativeInfo === undefined ||
            creativeInfo === null ||
            creativeInfo.length === 0
          ) {
            return result;
          }
          creativeInfo.forEach((ci) => {
            if (!ci.processing) {
              progr.uploadCount += 1;
              result.done += 1;
              if (ci.status === 1) {
                progr.successCount += 1;
              } else {
                progr.failedCount += 1;
                progr.retryIds.push(ci.creativeId);
                progr.errData.push({ name: ci.name, errMsg: ci.errMsg });
                this.failedQueue.push({
                  name: ci.name,
                  id: ci.id,
                  errMsg: ci.errMsg,
                });
              }
            }
          });
          if (progr.failedCount > 0) {
            result.needRetry = true;
          }
          progr.progress = parseInt(
            "" + (progr.uploadCount / this.creativesLen) * 100 + ""
          );
          result.doneInfos.push(progr);
        });
      }
      return result;
    },
    handleEdit(row) {
      this.detailDialog = true;
      this.dialogTitle = "edit";
      getDetail(row.id).then((res) => {
        this.detailData = res.data.data;
      });
    },
    handleDup(row) {
      this.detailDialog = true;
      this.dialogTitle = "dup";
      getDetail(row.id).then((res) => {
        this.detailData = res.data.data;
        this.detailData.status = 0;
      });
    },
    //查看
    handleCheck(row) {
      // this.handleCheckById(row.id);
      this.$nextTick(() => {
        this.creativeInfoDialog.name = row.performanceName;
        this.creativeInfoDialog.creativeId = row.id;
        this.creativeInfoDialog.dialogVisible = true;
      });
    },
    handleCheckById(id) {
      this.checkDialog = true;
      getDetail(id).then((res) => {
        this.checkData = res.data.data;
        this.comment = res.data.data.comments;
      });
    },
    rowSave(row, done, loading) {
      add(row).then(
        () => {
          this.onLoad(this.page);
          this.selectionClear();
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
        },
        (error) => {
          loading();
          window.console.log(error);
        }
      );
    },
    rowUpdate(row, index, done, loading) {
      update(row).then(
        () => {
          this.onLoad(this.page);
          this.selectionClear();
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
        },
        (error) => {
          window.console.log(error);
          loading();
        }
      );
    },
    rowDel(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return remove(row.id);
        })
        .then(() => {
          this.onLoad(this.page);
          this.selectionClear();
          this.$message({
            type: "success",
            message: "操作成功!",
          });
        });
    },
    handleShare() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      this.$confirm("确定将选择数据共享到原始素材库？", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return shareCreative(this.ids);
        })
        .then(() => {
          this.$message({
            type: "success",
            message: "操作成功!",
          });
        });
    },
    handleDelete() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return remove(this.ids);
        })
        .then(() => {
          this.onLoad(this.page);
          this.selectionClear();
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          this.$refs.crud.toggleSelection();
        });
    },
    async checkSelectionList() {
      if (
        this.selectionList.some(
          (item) => item.status === 3 || item.status === 4
        )
      ) {
        const ids = this.selectionList
          .filter((item) => item.status === 3 || item.status === 4)
          .map((item) => item.shortId)
          .join("，");
        const confirm = await this.$confirm(
          `<div style="display: flex"><i class="el-icon-warning" style="font-size: 24px;color: #E6A23C;margin-right: 10px;"></i><div><div>选择内容包含禁用\\审核拒绝状态的素材，请确认是否继续下载素材！</div>素材短ID：${ids}</div></div>`,
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            dangerouslyUseHTMLString: true,
            // type: 'warning'
          }
        ).catch(() => {
          this.$message({
            type: "info",
            message: "已取消下载",
          });
        });
        if (confirm) {
          await this.handleDownload();
        }
      } else {
        await this.handleDownload();
      }
    },
    async savesaveMaterial() {
      let  materialIds=[];
      this.selectionList.forEach(item => materialIds.push(item.id))
      let materialIdData={
        offerId:this.page.offerId,
        creativeIds:materialIds.join(',')
      }
      console.log(materialIdData)
      // let aa=await  saveMaterialIds(saveMaterialIds)
      saveMaterialIds(materialIdData).then(res => {
        this.onLoad(this.page);
      })
    },
    async handleDownload() {
      this.dialogFormVisible = false;
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      //判断选中数据中是否有还在上传中的数据
      let back = false;
      this.selectionList.map((item) => {
        if (
          !item.waterUrl ||
          item.waterUrl === "-1" ||
          item.waterUrl === "-2"
        ) {
          back = true;
        }
      });
      if (this.form.createType === 1 || this.form.createType === 3) {
        // 如果下载水印图片，检查一下当前最新的水印开关状态
        let res = await queryWaterMarkOpen();
        res.data.data.map((res) => {
          if (res.variableKey === "open" && res.variableValue === "0") {
            this.waterMarkOpen = false;
          }
        });
        if (this.waterMarkOpen == false) {
          this.$message.warning("素材水印功能未开启！");
          return;
        }
        if (back) {
          this.$message.warning("数据水印还未生成！");
          return;
        }
      }
      let _this = this;
      let zip = new JSZip();
      let obj = {};
      let promises = [];

      if (_this.selectionList.length > 1) {
        //压缩包下载
        let loading = this.$loading({
          lock: true,
          text: "下载中",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
        });
        _this.selectionList.map((item, index) => {
          const promise = _this
            .downloadUrlQiniu(
              _this.form.createType === 1 || _this.form.createType === 3
                ? item.waterUrl
                : item.creativeUrl
            )
            .then((res) => {
              zip.file(
                _this.downLoadName(
                  _this.selectionList[index],
                  _this.form.createType
                ) +
                "." +
                _this.selectionList[index].localFilename.split(".")[
                _this.selectionList[index].localFilename.split(".").length -
                1
                  ],
                res,
                { binary: true }
              ); //
              obj[
              _this.selectionList[index].name +
              "." +
              _this.selectionList[index].localFilename.split(".")[1]
                ] = res; // 逐个添
            });
          promises.push(promise);
        });
        Promise.all(promises)
          .then(() => {
            zip.generateAsync({ type: "blob" }).then((res) => {
              // 生成二进制流
              console.log(res);
              FileSaver.saveAs(
                res,
                this.offerList[
                  this.offerList.findIndex((item) => item.id === this.offer)
                  ].name + Moment(new Date()).format("YYYYMMDDhhmmss")
              ); // 利用file-saver保存文件,可以改成自己想要的压缩包名称
              loading.close();
              this.savesaveMaterial()
              this.selectionList = [];
              this.$refs.crud.toggleSelection();
            });
          })
          .catch((e) => {
            loading.close();
            _this.$message.error("素材下载失败，请重试！");
            console.error(e);
          });
      } else {
        //单张素材下载
        let loading = this.$loading({
          lock: true,
          text: "下载中",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
        });
        const promise = _this
          .downloadUrlQiniu(
            _this.form.createType === 1 || _this.form.createType === 3
              ? _this.selectionList[0].waterUrl
              : _this.selectionList[0].creativeUrl
          )
          .then((res) => {
            loading.close();
            var blob = new Blob([res]);
            FileSaver.saveAs(
              blob,
              _this.downLoadName(
                _this.selectionList[0],
                _this.form.createType
              ) +
              "." +
              _this.selectionList[0].localFilename.split(".")[
              _this.selectionList[0].localFilename.split(".").length - 1
                ]
            );
            this.savesaveMaterial()
            this.$refs.crud.toggleSelection();
          })
          .catch((error) => {
            if (error) loading.close();
          });
      }
    },
    async handleDownloadBackend() {
      this.dialogFormVisible = false;
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      //判断选中数据中是否有还在上传中的数据
      let back = false;
      this.selectionList.map((item) => {
        if (
          !item.waterUrl ||
          item.waterUrl === "-1" ||
          item.waterUrl === "-2"
        ) {
          back = true;
        }
      });
      if (this.form.createType === 1 || this.form.createType === 3) {
        // 如果下载水印图片，检查一下当前最新的水印开关状态
        let res = await queryWaterMarkOpen();
        res.data.data.map((res) => {
          if (res.variableKey === "open" && res.variableValue === "0") {
            this.waterMarkOpen = false;
          }
        });
        if (this.waterMarkOpen === false) {
          this.$message.warning("素材水印功能未开启！");
          return;
        }
        if (back) {
          this.$message.warning("数据水印还未生成！");
          return;
        }
      }

      let _this = this;
      let creativeIds = [];
      this.selectionList.forEach((item) => {
        creativeIds.push(item.id);
      });
      let cids = creativeIds.join(",");
      let callback = () => {};
      let loading = this.$loading({
        lock: true,
        text: "下载中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      downloadCreatives(
        { creativeIds: cids, type: this.form.createType },
        callback
      )
        .then((res) => {
          if (creativeIds.length === 1) {
            loading.close();
            console.log("res ->", res);
            let blob = new Blob([res.data]);
            FileSaver.saveAs(
              blob,
              _this.downLoadName(
                _this.selectionList[0],
                _this.form.createType
              ) +
              "." +
              _this.selectionList[0].localFilename.split(".")[
              _this.selectionList[0].localFilename.split(".").length - 1
                ]
            );
            this.$refs.crud.toggleSelection();
          } else {
            loading.close();
            console.log("res ->", res);
            let blob = new Blob([res.data]);
            FileSaver.saveAs(
              blob,
              this.offerList[
                this.offerList.findIndex((item) => item.id === this.offer)
                ].name +
              Moment(new Date()).format("YYYYMMDDhhmmss") +
              ".zip"
            ); // 利用file-saver保存文件,可以改成自己想要的压缩包名称
            loading.close();
            this.selectionList = [];
            this.$refs.crud.toggleSelection();
          }
        })
        .catch((error) => {
          if (error) loading.close();
        });
    },
    downloadUrl(url) {
      console.log("url", url);
      return new Promise((resolve, reject) => {
        if (!url.startsWith("http")) {
          return;
        }
        let startDiv = url.startsWith("https")
          ? url.indexOf("https://") + "https://".length
          : url.indexOf("http://") + "http://".length;
        let endDiv = url.indexOf(".", startDiv);
        let bucket = url.substring(startDiv, endDiv);
        startDiv = endDiv + 1;
        endDiv = url.indexOf("/", startDiv);
        let server = url.substring(startDiv, endDiv);
        endDiv = url.indexOf("?", startDiv);
        if (endDiv == -1) {
          endDiv = url.indexOf("&", startDiv);
        }
        if (endDiv == -1) {
          endDiv = url.length;
        }
        startDiv = url.lastIndexOf("/", endDiv) + 1;
        let targetName = url.substring(startDiv, endDiv);
        let obsClient = new ObsClient({
          access_key_id: "BVIEDCKS1F8VMR1FIOO8",
          secret_access_key: "k3IQibnpbaqISScliV435aiwYjrDwaJwAh2p574s",
          server: server,
        });
        obsClient.getObject(
          {
            Bucket: bucket,
            Key: decodeURIComponent(targetName),
            SaveByType: "arraybuffer",
          },
          (err, result) => {
            if (err) {
              reject(err);
            } else {
              resolve(result.InterfaceResult.Content);
            }
          }
        );
      });
    },
    downloadUrlQiniu(url) {
      return new Promise((resolve, reject) => {
        if (!url.startsWith("http")) {
          return;
        }
        if (!url.startsWith("https")) {
          let urlArr = url.split("://");
          if (urlArr.length < 2) {
            return;
          }
          url = "https://" + urlArr[1];
        }
        // url = getCrossUrl(url)
        fetch(url, {
          method: "GET",
          headers: {
            "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
          },
        })
          .then((res) => {
            resolve(res.blob());
          })
          .catch((err) => {
            reject(err);
          });
        // request.get(url, {
        //   responseType: "blob",
        //   headers: {
        //     "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
        //   }
        // }).then((res) => {
        //   resolve(res.data)
        // }).catch((err) => {
        //   reject(err)
        // })
      });
    },
    //下载文件名
    downLoadName(selectFile, type) {
      console.log(type);
      let name;
      if (selectFile.originCreativeId && selectFile.originCreativeId !== "") {
        name = selectFile.localFilename;
      } else if (type == 2 || type == 3) {
        name = selectFile.localFilename;
      } else {
        name = selectFile.name;
      }

      let index = name.lastIndexOf(".");
      if (index > 0) {
        return name.substring(0, index);
      } else {
        return name;
      }
    },

    beforeOpen(done, type) {
      if (["edit", "view"].includes(type)) {
        getDetail(this.form.id).then((res) => {
          this.form = res.data.data;
        });
      }
      done();
    },
    searchReset() {
      this.query = {};
      this.onLoad(this.page);
      this.selectionClear();
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      this.selectionClear();
      done();
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    selectionClear() {
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
      this.selectionClear();
    },
    onLoad(page, params = {}) {
      // this.loading = true;
      let sortList = this.sortList;
      this.query.sortList = JSON.stringify(sortList);
      getList(
        page.currentPage,
        page.pageSize,
        page.offerId,
        Object.assign(params, this.query)
      ).then((res) => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records.map((item) => {
          item.plfSwitch = false;
          item.platform = item.platform === "" ? [] : item.platform.split(",");
          return item;
        });
        this.$refs.crud.toggleSelection();
        this.data.map((item) => {
          item.designer = item.designer.split(",");
          item.originator = item.originator.split(",");
        });
      });
    },
    //关闭新增/编辑弹出框
    closeCreativeDialog() {
      this.detailDialog = false;
      this.onLoad(this.page);
      this.selectionClear();
    },
    //关闭检查弹出框
    closeCreativeCheckDialog() {
      this.checkDialog = false;
    },
    //关闭审核弹窗
    handleExamineCLose() {
      this.onLoad(this.page);
      this.visible = false;
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },
    handleMediaPreview(row) {
      // this.mediaPreviewDialog.previewUrl =
      //   row.creativeUrl +
      //   "?" +
      //   (row.updateTime ? row.updateTime.replace(/[ :-]*/gi, "") : 1234);
      // this.mediaPreviewDialog.dialogType = row.type == 0 ? "image" : "video";
      this.currentCreative = row;
      this.mediaPreviewDialog.dialogVisible = true;
    },
    getCellClassName(scope) {
      if (
        (scope.column.property == "status" ||
          scope.column.property == "shortId") &&
        scope.row.status == 3
      ) {
        return "alarmText";
      }
      return "";
    },
    validYouTubeStatus(success, error, msg) {
      let len = this.youTubeIds.split(",").length;
      if (len === success + error) {
        this.$alert(
          "上传完成，成功【" +
          success +
          "】个，失败【" +
          error +
          "】个, 错误:" +
          msg,
          "提示",
          {
            confirmButtonText: "确定",
            callback: () => {
              this.closeYouTube();
            },
          }
        );
      }
    },
    closeYouTube() {
      this.youtobeLoading = false;
      this.youTubeUploading = false;
      this.handleUploadToYoutubeClose();
      this.$forceUpdate(); // 强制刷新组件
      this.refreshChange();
    },
    updateTubeUploading(flag) {
      this.youTubeUploading = flag;
    },
    //媒体 logo
    platformLogo(platform) {
      return platformLogo(platform);
    },
    creativeStatusDotSplit(creativeStatus) {
      let dotList = [];
      if (creativeStatus === "" || creativeStatus == undefined) {
        // dotList.push("background-color: #9a9a9f;")
        return dotList;
      }
      let list = creativeStatus.split(",");
      list.map((item) => {
        switch (item) {
          case "0":
            dotList.push("background-color: #9a9a9f;");
            return;
          case "1":
            dotList.push("background-color: #34C758;");
            return;
          case "2":
            dotList.push("background-color: #FF9502;");
            return;
          case "3":
            dotList.push("background-color: #FF3A30;");
            return;
        }
      });

      return dotList;
    },
    // ---marco---
    save() {
      this.$refs.productCreativeReRef.handleSubmit();
    },
    closeAdd() {
      this.addDrawer = false;
      this.refreshChange();
    },
    closeDrawer() {
      this.$refs.productCreativeReRef.clearForm();
    },
    // 关闭上传请求
    handleUploadToYoutubeClose() {
      if (this.$refs.youtubeDialogRef.getAccessTokenXhr) {
        this.$refs.youtubeDialogRef.getAccessTokenXhr.abort();
      }
      if (this.$refs.youtubeDialogRef.uploadXhr) {
        this.$refs.youtubeDialogRef.uploadXhr.abort();
      }
    },
    openAdCreativeDrawer(row) {
      if (row != undefined) {
        this.currentCreative = row;
      }
      this.creativeAdSwitch = true;
    },
    // 修改平台弹窗
    async handleBlurPlf(event, row) {
      if (!event) {
        row.plfSwitch = false;
        console.log(row);
        await updateCreativePlatforms({
          creativeId: row.id,
          platforms: row.platform.join(","),
        });
        this.$message.success("修改媒体成功");
      }
    },
  },
};
</script>

<style lang="scss">
.youtubeLinkDiv {
  cursor: pointer;
  color: #409eff;
}
</style>

<style lang="scss" scoped>
.text {
  width: 45px;
  height: 30px;
  float: left;
  font-size: 13px;
  margin-top: 3px;
  color: #72767b;
}

/deep/ .alarmText {
  color: red;
}

/deep/ [searchform].el-form .el-form-item__error {
  top: -20px;
  left: 45px;
}

.search-circle {
  border-radius: 50%;
  border: 1px solid #dcdfe6;
  width: 30px;
  height: 30px;
  padding: 0;
  margin-right: 0;
}

.orange {
  color: #ff9543;
  color: #ff7a29;
}

.red {
  color: red;
}

.black {
  color: #000c17;
}

/deep/ .el-drawer__body {
  overflow: auto;
}

/deep/ .el-checkbox {
  color: #2b373d;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  user-select: none;
}

.cancel-button {
  color: #20222a;
  background-color: #ffffff;
  border-color: #c7c7c7;
  width: 75px;
}

.drawer__content {
  height: 90vh;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .drawer__body {
    height: calc(100% - 50px);
    overflow-x: hidden;
    overflow-y: scroll;
  }

  .drawer__footer {
    display: flex;
    align-items: center;
    height: 50px;
    flex: 0 0 auto;
  }
}

.dot_status {
  display: inline-block;

  i {
    margin-left: 2px;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    display: inline-block;
  }
}

.popover_pane {
  display: flex;
  flex-direction: column;

  div {
    margin-left: 5px;
  }

  span {
    margin-left: 5px;
  }

  /** 在线状态*/
  .ad_online_status {
    i {
      background-color: #34c758;
    }

    span {
      color: #34c758;
    }
  }

  /** 在线受限状态*/
  .ad_online_limit_status {
    i {
      background-color: #ff9502;
    }

    span {
      color: #ff9502;
    }
  }

  /** 违规*/
  .ad_illegal_status {
    i {
      background-color: #ff3a30;
    }

    span {
      color: #ff3a30;
    }
  }

  /**停止状态*/
  .ad_stop_status {
    i {
      background-color: #9a9a9f;
    }

    spnd {
      color: black;
    }
  }
}

.text-link {
  text-decoration: underline;
}

.download_file {
  display: flex;
  justify-content: center;
  flex-direction: column;
}
</style>

